<template>
  <div>
    <div class="search-container" v-if="showSearch">
      <CommonSearch
        :formConfig="searchColumns"
        :inline="true"
        labelWidth="auto"
        formItemWidth="auto"
        :model="searchParam"
      >
        <template #after>
          <el-radio-group v-model="unitTime" @change="radioSwitchChange">
            <el-radio-button
              v-for="item in options"
              :label="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </template>
      </CommonSearch>
    </div>
    <el-card shadow="never" class="table-container h-full">
      <div style="width: 100%; height: 100%" ref="ganttContainer"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { gantt, Task } from "dhtmlx-gantt";
import { useGantt } from "@/utils/useGantt";
import { mockTasks, mockColumns } from "@/assets/js/mock";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
// import "dhtmlx-gantt/codebase/skins/dhtmlxgantt_material.css";
// 表格操作 Hooks
const {
  options,
  searchColumns,
  searchParam,
  radioSwitchChange,
  initGanttFunction,
  tasks,
  columns,
  scaleTime,
  // dateScale,
  showSearch,
  unitTime,
}: any = useGantt();

// 挂载ref
const ganttContainer = ref();

onMounted(() => {
  gantt.clearAll();
  showSearch.value = false;
  columns.value = mockColumns;
  tasks.value = mockTasks;
  unitTime.value = scaleTime.value; // 切换日月周季
  initParam();
});

const initParam = () => {
  // 设置默认配置
  initGanttFunction();
  // 自定义配置（进度条、提示框、灯箱）
  templatesCustom();
  tooltipCustom();
  lightBoxCustom();
  // 表格列赋值
  gantt.config.columns = columns.value;
  // 初始化甘特图
  gantt.init(ganttContainer.value);
  // 渲染数据
  gantt.parse(tasks.value);
};

// 进度条自定义
function templatesCustom() {
  // 自定义时间轴上的柱子文本
  gantt.templates.task_text = function (start, end, task: Task) {
    if (task?.$split_subtask) {
      return task.id.toString();
    } else {
      return `${task.text} <span class='progress_value'>${
        Math.round((task.progress ?? 0) * 100) + "%"
      }</span>`;
    }
  };

  // 自定义任务进度条颜色
  gantt.templates.task_class = function (start, end, task: Task) {
    if (task.text === "A01 拉丝") {
      return "red";
    } else if (task.text === "A03 纹合") {
      return "orange";
    }
    return "";
  };
}

// tooltip提示文字设置
function tooltipCustom() {
  gantt.templates.tooltip_text = function (start, end, task) {
    const parentName =
      task.type === "project"
        ? ""
        : tasks.value.data.filter((item: any) => item.id == task.parent)[0]
            ?.text;
    const title = task.type === "project" ? "订单" : "工序";
    return `<p class="tooltip_p">${task.text}</p>
      <p><b>数量:</b>${task.total} <b>已排:</b>${task.done}</p>
          <p><b>进度:</b>${Math.round(
            (task.progress ?? 0) * 100
          )}%<b>状态:</b>${task.done}</p>
              <p><b>周期:</b>${gantt.templates.tooltip_date_format(
                start
              )} - ${gantt.templates.tooltip_date_format(end)}</p>
        ${parentName ? `<p><b>所属订单:</b>${parentName}</p>` : ``}
        `;
  };
}

// 自定义灯箱配置
function lightBoxCustom() {
  // 自定义字段名称
  gantt.locale.labels.section_total = "数量";
  gantt.locale.labels.section_description = "订单/工序";
  gantt.locale.labels.section_done = "已排";
  // 自定义task灯箱字段
  gantt.config.lightbox.sections = [
    {
      name: "description",
      height: 36,
      map_to: "text",
      type: "textarea",
      focus: true,
    },
    {
      name: "total",
      height: 36,
      map_to: "total",
      type: "textarea",
    },
    {
      name: "done",
      height: 36,
      map_to: "done",
      type: "textarea",
    },
    {
      name: "time",
      type: "duration",
      map_to: "auto",
      _time_format_order: {
        "0": 0,
        "1": 1,
        "2": 2,
        size: 3,
      },
    },
  ];
  // 自定义project灯箱字段
  gantt.config.lightbox.project_sections = [
    {
      name: "description",
      height: 36,
      map_to: "text",
      type: "textarea",
      focus: true,
    },
    {
      name: "time",
      type: "duration",
      readonly: true,
      map_to: "auto",
      _time_format_order: {
        "0": 0,
        "1": 1,
        "2": 2,
        size: 3,
      },
    },
  ];
}

watch(
  () => scaleTime.value,
  () => {
    radioSwitchChange(scaleTime.value);
  },
  {
    immediate: true,
  }
);

onBeforeUnmount(() => {
  gantt.clearAll();
});
</script>
<style lang="scss">
@import url(@/styles/gantt.scss);
</style>
